<template>
	<div>
		<view class="white-bg mtp wrap-progress">
			<view class="title-color fb-32"> 订单流程 </view>

			<view class="order-num-bg flex align-center">
				<view class="title-color f-28 limit-num-line">
					订单编号：{{ dataInfo.order_sn }}
				</view>

				<view class="copy f-20" @click="onCopyOrderNum"> 复制 </view>
			</view>
			<view class="wrap-progress-list" v-if="dataInfo">
				<block v-for="(item, index) in list" :key="index">
					<view class="progress-item flex">
						<view class="circle flex align-center just-center">
							<view v-if="item.status <= dataInfo.status"></view>
						</view>

						<view class="progress-right">
							<view class="one flex align-center">
								<view class="title-color f-28">
									{{ item.title }}
								</view>

								<view
									class="status f-26"
									v-if="item.status > dataInfo.status"
								>
									状态未开启
								</view>
							</view>

							<view
								class="time f-24"
								v-if="item.status <= dataInfo.status"
							>
								{{ getAcceptTimeText(item.status) }}
							</view>

							<view
								class="phone-bg"
								v-if="
									(item.status === '5' ||
										item.status === '7') &&
									item.status <= dataInfo.status
								"
								@click="
									$filters.onPreviewImage(
										[
											item.status === '5'
												? dataInfo.arrive_img
												: dataInfo.end_service_img,
										],
										0
									)
								"
							>
								<image
									v-if="item.status === '5'"
									:src="dataInfo.arrive_img"
								/>
								<image
									v-else-if="item.status === '7'"
									:src="dataInfo.end_service_img"
								/>
							</view>

							<view
								class="address-bg flex align-center"
								v-if="
									(item.status === '4' ||
										item.status === '5' ||
										item.status === '7') &&
									item.status <= dataInfo.status
								"
								@click="onCheckAddress(item.status)"
							>
								<image
									:src="
										getImageURL(
											'technician/order/location.png'
										)
									"
								/>
								<view class="f-24">
									{{ getAddressText(item.status) }}
								</view>
							</view>
						</view>

						<view class="line"></view>
					</view>
				</block>
			</view>
		</view>
	</div>
</template>

<script>
	/**
	 * 这个是订单流程的组件
	 */
	export default {
		props: {
			/**
			 * 详情数据
			 */
			dataInfo: {
				type: Object,
				default: null,
			},
		},
		data() {
			return {
				list: [
					{ title: "服务师接单", status: "3" },
					{ title: "服务师出发", status: "4" },
					{ title: "服务师到达", status: "5" },
					{ title: "开始服务", status: "6" },
					{ title: "服务完成", status: "7" },
				],
			};
		},
		methods: {
			/**
			 * 复制订单号
			 */
			onCopyOrderNum() {
				uni.setClipboardData({
					data: this.dataInfo.order_sn,
					success: (success) => {
						this.$st.show("复制成功");
					},
				});
			},
			/**
			 * 查看地址
			 */
			onCheckAddress(status) {
				let lat, lng, address;
				if (status === "4") {
					lat = this.dataInfo.trip_start_lat;
					lng = this.dataInfo.trip_start_lng;
					address = this.dataInfo.trip_start_address;
				} else if (status === "5") {
					lat = this.dataInfo.trip_end_lat;
					lng = this.dataInfo.trip_end_lng;
					address = this.dataInfo.trip_end_address;
				} else if (status === "7") {
					lat = this.dataInfo.service_complete_lat;
					lng = this.dataInfo.service_complete_lng;
					address = this.dataInfo.service_complete_address;
				}
				uni.openLocation({
					latitude: parseFloat(lat),
					longitude: parseFloat(lng),
					address: address,
				});
			},
			/**
			 * 获取接单时间
			 * 订单状态:-1=已取消,1=待支付,2=待服务,3=技师接单,4=技师出发,5=技师到达,6=服务中,7=已完成,8=技师拒单
			 */
			getAcceptTimeText(status) {
				let time_text = "";

				const index = parseInt(status) - 1;
				const timeTextArray = [
					"",
					"",
					this.dataInfo.receiving_time_text,
					this.dataInfo.serout_time_text,
					this.dataInfo.arrive_time_text,
					this.dataInfo.start_service_time_text,
					this.dataInfo.end_service_time_text,
				];

				if (index >= 0 && index < timeTextArray.length) {
					time_text = timeTextArray[index];
				}

				return time_text;
			},
			/**
			 * 获取地址信息
			 */
			getAddressText(status) {
				let address_text = "";

				const index = parseInt(status) - 1;
				const addressTextArray = [
					"",
					"",
					"",
					this.dataInfo.trip_start_address,
					this.dataInfo.trip_end_address,
					"",
					this.dataInfo.service_complete_address,
				];

				if (index >= 0 && index < addressTextArray.length) {
					address_text = addressTextArray[index];
				}

				return address_text;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-progress {
		width: 100%;
		overflow: hidden;
		background-color: white;
		border-radius: 10rpx;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.order-num-bg {
			margin-top: 30rpx;

			.copy {
				margin-left: 20rpx;
				width: 68rpx;
				height: 36rpx;
				line-height: 36rpx;
				text-align: center;
				color: $theme-color;
				border: 2rpx solid $theme-color;
				border-radius: 6rpx;
				overflow: hidden;
			}
		}
	}
	.wrap-progress-list {
		margin-top: 15rpx;
		width: 100%;
		overflow: hidden;

		.progress-item {
			width: 100%;
			padding: 15rpx 0;
			position: relative;
			z-index: 1;

			.line {
				position: absolute;
				left: 16rpx;
				top: 0rpx;
				bottom: 0rpx;
				width: 2rpx;
				background-color: $old-price-color;
				z-index: 2;
			}
			&:first-child .line {
				top: 30rpx !important;
			}
			&:last-child .line {
				bottom: none;
				height: 15rpx;
			}

			&:last-child {
				margin-bottom: 0rpx;
				padding-bottom: 0rpx !important;
			}

			.circle {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				overflow: hidden;
				border: 2rpx solid $theme-color;
				background-color: white;
				position: relative;
				z-index: 3;

				> view {
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					background-color: $theme-color;
					overflow: hidden;
				}
			}

			.progress-right {
				margin-left: 16rpx;
				flex: 1;
				overflow: hidden;

				.one {
					width: 100%;
					height: 34rpx;
					overflow: hidden;

					.status {
						margin-left: 20rpx;
						color: $old-price-color;
					}
				}
				.time {
					margin-top: 20rpx;
					color: $old-price-color;
				}

				.phone-bg {
					margin-top: 20rpx;
					width: 196rpx;
					height: 196rpx;
					background-color: $old-price-color;
					border-radius: 10rpx;
					overflow: hidden;

					> image {
						width: 100%;
						height: 100%;
					}
				}

				.address-bg {
					margin-top: 20rpx;
					width: 100%;
					overflow: hidden;

					> image {
						width: 20rpx;
						height: 22rpx;
					}
					> view {
						margin-left: 8rpx;
						color: $theme-color;
						line-height: 1.4em;
					}
				}
			}
		}

		.title-color {
			color: $title-color;
		}
	}
</style>
